<template>
    <view :data-theme="globPrimary">
        <u-navbar>
            <view
                v-if="!$u.test.empty(topicData)"
                class="topic-navbar-collection"
                @click="changeCollection"
            >
                <u-icon
                    name="star-fill"
                    :color="topicData.collected ? '#FF8A52' : '#DCDFE6'"
                    size="40"
                ></u-icon>
            </view>
        </u-navbar>
        <view class="topic-header u-flex">
            <view class="answered" :style="[{ top: answeredTop }]" v-if="hasAnswered">
                <!-- 最后一个显示正确 -->
                <u-image
                    width="148rpx"
                    height="148rpx"
                    src="@/pageFound/static/images/sure.png"
                    class="img"
                    v-show="answerRight && nextTopicQuery && $u.test.empty(nextTopicQuery.topic_id)"
                ></u-image>
                <u-image
                    width="148rpx"
                    height="148rpx"
                    src="@/pageFound/static/images/wrong.png"
                    class="img"
                    v-show="!answerRight"
                ></u-image>
            </view>
        </view>

        <view class="topic-body" v-if="!$u.test.empty(topicData)">
            <practice-question
                :question="topicData"
                :value="questionValue(topicData)"
                :score="topicData.score"
                :disabled="hasAnswered == 1"
                @change="handleQuestionChange"
            ></practice-question>
            <record-parsing
                :parsing="topicData"
                v-if="
                    (hasAnswered == 1 && $u.test.empty(nextTopicQuery.topic_id)) ||
                    (hasAnswered == 1 && answerRight == 0)
                "
            ></record-parsing>
        </view>

        <record-pagination
            :show-next-button="nextTopicQuery && !$u.test.empty(nextTopicQuery.topic_id)"
            :show-confirm-button="nextTopicQuery && $u.test.empty(nextTopicQuery.topic_id)"
            :disabled="hasAnswered == 1"
            @next="handleTopicNext"
            @confirm="handleQuestionAnswer"
        ></record-pagination>

        <edu-empty v-if="!loading && $u.test.empty(topicData)"></edu-empty>
    </view>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import practiceQuestion from '../components/practice-question.vue'
import recordPagination from '../components/record-pagination.vue'
import recordParsing from '../components/record-parsing.vue'
export default {
    components: {
        practiceQuestion,
        recordPagination,
        recordParsing,
    },
    data() {
        return {
            loading: false,
            queryId: 0,
            topicData: {},
            uniqueCode: '',
            disabled: false,
            nextTopicQuery: null,
            prevTopicQuery: null,
            hasAnswered: 0, // 是否已答
            answerRight: 0, // 答案是否正确
        }
    },
    computed: {
        ...mapState({
            topicIndex: (state) => state.examPractice.topicIndex,
            topicList: (state) => state.examPractice.topicList,
        }),
        ...mapGetters({
            globPrimary: 'designSetting/getGlobTheme',
            globPrimaryColor: 'designSetting/getGlobThemeColor',
            globNavbarHeight: 'projectSetting/globNavbarHeight',
            globStatusBarHeight: 'projectSetting/globStatusBarHeight',
            topicId: 'examPractice/getTopicId',
        }),
        topicItemData() {
            // 加载试题
            let topic = this.topicList.find((item) => item.topic_id == this.topicId)
            if (topic) {
                return topic
            } else {
                return {
                    part_id: 0,
                    topic_id: 0,
                }
            }
        },
        answeredTop() {
            let top = this.globNavbarHeight + this.globStatusBarHeight + uni.upx2px(16) + 'px'
            return top
        },
    },
    onLoad(option) {
        this.getRecordInfo(option.id)
    },
    methods: {
        // 获取的基础信息
        getRecordInfo(id) {
            this.loading = true
            this.$edu.api
                .getWrongAnalysis({
                    record_id: id,
                })
                .then((res) => {
                    const { data } = res
                    this.uniqueCode = data.unique_code
                    this.queryId = data.id
                    this.$store.commit('examPractice/init', data.paper_parts)
                    // 加载试题
                    this.getExamTopic({
                        part_id: this.topicItemData.part_id,
                        topic_id: this.topicItemData.topic_id,
                    })
                })
        },
        // 获取试题
        getExamTopic(query) {
            uni.showLoading({
                title: '加载中...',
            })
            this.loading = true
            this.$edu.api
                .getWrongAgain({
                    unique_code: this.uniqueCode,
                    epar_id: this.queryId,
                    part_id: query.part_id,
                    topic_id: query.topic_id,
                })
                .then((res) => {
                    this.hasAnswered = 0
                    this.answerRight = 0
                    const { data } = res
                    if (!this.$u.test.empty(data)) {
                        this.topicData = data.topic
                        this.nextTopicQuery = data.next
                        this.prevTopicQuery = data.prev
                        this.changeCorrectAnswer()
                    }
                    setTimeout(() => {
                        this.loading = false
                        uni.hideLoading()
                    }, 200)
                })
                .catch((err) => {
                    uni.hideLoading()
                })
        },
        // 当前值
        questionValue(item) {
            if (!this.loading) {
                const rules = this.topicList.find((item) => item.topic_id == this.topicId)
                let empty = null
                if (this.$edu.test.inArray(item.question_type, [1, 2])) {
                    empty = ''
                } else if (this.$edu.test.inArray(item.question_type, [3, 4, 7])) {
                    empty = []
                }
                if (this.$u.test.empty(rules) || this.$u.test.empty(rules.current_answer)) {
                    return empty
                } else {
                    return rules.current_answer
                }
            }
        },
        // 保存正确的答案
        changeCorrectAnswer() {
            let topic = this.topicData
            let answer = null
            if (this.$edu.test.inArray(topic.question_type, [1, 2])) {
                // 单选/判断
                let option = topic.options.find((item) => item.is_right)
                answer = option.id
            } else if (this.$edu.test.inArray(topic.question_type, [3, 4])) {
                // 多选/不定项选择
                let option = topic.options.filter((item) => item.is_right == 1)
                answer = option.map((item) => item.id)
            } else if (this.$edu.test.inArray(topic.question_type, [7])) {
                // 完型填空
                let option = topic.topics.map((ele) => {
                    let options = ele.options.find((item) => item.is_right == 1)
                    return options.id
                })
                answer = option
            }
            this.$store.commit('examPractice/changeCorrectAnswer', {
                id: this.topicId,
                answer: answer,
            })
        },
        // 下一题
        handleTopicNext() {
            if (!this.loading) {
                if (this.hasAnswered) {
                    this.$store.commit('examPractice/next')
                    this.getExamTopic(this.nextTopicQuery)
                } else {
                    this.handleQuestionAnswer()
                }
            }
        },
        // 选择的答案变化时
        handleQuestionChange(e) {
            if (!this.loading) {
                this.$store.commit('examPractice/changeCurrentAnswer', {
                    id: this.topicId,
                    answer: e,
                })
            }
        },
        // 提交单项答案时
        handleQuestionAnswer() {
            if (!this.loading && !this.hasAnswered) {
                const rules = this.topicList.find((item) => item.topic_id == this.topicId)
                /* const topic = this.topicList.find(
                    (item) => item.id == this.topicId
                ); */
                let is_right = 0
                if (this.$edu.test.inArray(this.topicData.question_type, [1, 2])) {
                    // 单选
                    is_right = rules.current_answer == rules.correct_answer ? 1 : 0
                } else {
                    // 多选/数组
                    if (rules.correct_answer && rules.current_answer) {
                        if (rules.correct_answer.length == rules.current_answer.length) {
                            let num = rules.correct_answer.every((item) =>
                                rules.current_answer.includes(item)
                            )
                            is_right = num ? 1 : 0
                        } else {
                            is_right = 0
                        }
                    }
                }
                if (is_right) {
                    if (this.nextTopicQuery && !this.$u.test.empty(this.nextTopicQuery.topic_id)) {
                        this.$store.commit('examPractice/next')
                        this.getExamTopic(this.nextTopicQuery)
                    }
                }
                this.hasAnswered = 1
                this.answerRight = is_right
                this.$edu.api.referWrongTopic({
                    topic_level: 1,
                    topic_id: this.topicData.topic_id.toString(),
                    is_right: is_right,
                })
            }
        },
        // 收藏
        changeCollection() {
            if (!this.loading) {
                let status = this.topicData.collected == 1 ? 0 : 1
                this.$edu.api
                    .getTopicCollect({
                        topic_id: this.topicId.toString(),
                        status: status,
                    })
                    .then((res) => {
                        this.$u.toast(res.data)
                        this.topicData.collected = status
                    })
            }
        },
    },
    destroyed() {
        this.$store.commit('examPractice/init')
    },
}
</script>
<style lang="scss">
page {
    background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.topic-navbar-collection {
    padding: 10px 20rpx;
    margin-left: auto;
}
.topic-header {
    position: relative;
    .title {
        max-width: 60%;
        font-size: 32rpx;
        font-weight: 500;
        color: #303133;
    }
    .img {
        margin-left: auto;
        margin-right: 20rpx;
    }
    .count {
        font-size: 26rpx;
        color: #909399;
    }
    .active {
        @include text-color();
    }
    .answered {
        position: fixed;
        right: 8rpx;
        z-index: 99;
    }
}
.topic-body {
    padding: 0 30rpx;
    margin-top: 30rpx;
}
</style>
